﻿<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" language="java" import="java.util.*" %>

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/topic.css">
</head>
<body>
<%@ include file="header.jsp" %>


	<div class="main w clearfix">
		<div class="main-left">
			<div class="share">
				<div class="share-left"><span class="glyphicon glyphicon-th-large"></span>&nbsp;话题广场</div>

			</div>
			<div class="topic-root">
				<div class="topic-root-wrap">
					<c:forEach items="${topicList}" var="topic">
                        <a href="#">${topic.name}</a>
                    </c:forEach>

				</div>
			</div>
			<%--话题列表--%>
			<div class="topic-list">
				<div class="topic-list-wrap clearfix">
                    <c:forEach items="${topicList}" var="topic" varStatus="status">
                        <c:choose>
                            <c:when test="${status.count%2!=0}">
                                <div class="topic-odd relative">
                                    <a href="#" class="topic-image"><img src="${topic.image}"></a>
                                    <div class="topic-content">
                                        <a href="#" class="topic-name">${topic.name}</a>
                                        <a href="#" class="topic-desc">${topic.content}</a>
                                    </div>
                                </div>
                            </c:when>
                            <c:otherwise>
                                <div class="topic-even relative">
                                    <a href="#" class="topic-image"><img src="${topic.image}"></a>
                                    <div class="topic-content">
                                        <a href="#" class="topic-name">${topic.name}</a>
                                        <a href="#" class="topic-desc">${topic.content}</a>
                                    </div>
                                </div>
                            </c:otherwise>
                        </c:choose>
                    </c:forEach>
				</div>
			</div>

		</div>
		<div class="main-right">
			
			<div class="hot-user">
				<div class="clearfix"><div class="hot-user-title"><span></span>&nbsp;推荐网站</div></div>
				<ul class="hot-user-list">
					<li class="clearfix">
						<a href="http://toutiao.io/" class="hot-user-image"><img src="http://tva2.sinaimg.cn/crop.0.0.1022.1022.180/005Fj2RDgw1ex5pinpg65j30sg0sgdg9.jpg"></a>
						<a href="http://toutiao.io/" class="hot-user-name">开发者头条</a>
					</li>
					<li class="clearfix">
						<a href="http://gold.xitu.io/" class="hot-user-image"><img src="http://tva3.sinaimg.cn/crop.0.0.227.227.180/005SiNxyjw8f6nd2g4erxj306g06c74g.jpg"></a>
						<a href="http://gold.xitu.io/" class="hot-user-name">稀土掘金</a>
					</li>
					<li class="clearfix">
						<a href="https://segmentfault.com/" class="hot-user-image"><img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/795bf814jw1e8qgp5bmzyj2050050aa8.jpg"></a>
						<a href="https://segmentfault.com/" class="hot-user-name">SegmentFault</a>
					</li>
				</ul>
			</div>
		</div>
	</div>

	<div class="mask"></div>

<%@ include file="footer.jsp" %>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript">
	$(function(){

		var openMask = $("#open-mask");
		var closeMask = $("#close-mask");
		var mask = $(".mask");
		var uponMask = $(".upon-mask");

		openMask.click(function(){
			mask.show();
			uponMask.show();
		});

		closeMask.click(function(){
			mask.hide();
			uponMask.hide();
		});
	});
</script>
</body>
</html>













